<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
  <div>
    <el-card v-if="isList" class="cardclass">
      <el-header class="headerClass">
            <span class='spanClass'>
                <p style="padding: 0;margin: 0">
                    <b>客户评级：</b>客户经理对管理的企业客户按照相关指标给出具体评分。
                </p>
            </span>
      </el-header>
      <ft-pagination :total="totalElements" :current-page="currentPage" @pageChange="load" style="padding: 0 20px">
        <div slot="toolbar">
                <span style="text-align: left; float: left; padding:10px 6px 0 0">
                    <el-button type="primary" icon="joys-icon-refresh" size="small" @click="refreshPage">刷新</el-button>
                </span>
          <span style="float: left; padding:10px 72px 0 0">
                    <el-button icon="joys-icon-new" size="small" type="primary" @click="add">新增</el-button>
                </span>
          <span style="float: left; padding:10px 72px 0 0">
                    <ft-advanced-query title="请输入客户名称进行搜索" @packup="packup" @load="search"></ft-advanced-query>
                </span>
        </div>
        <el-row v-if="showQueryPanel">
          <!--高级查询-->
          <customer-rating-query-form @query="search" @change="ratingQueryChange"></customer-rating-query-form>
        </el-row>
        <el-table :data="ratingData" v-loading="loading" ref="tableRef" tooltip-effect="light">
          <el-table-column min-width="110" align="left" label="客户名称" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <el-button type="text" style="padding-left: 0;margin-left: 0" @click="handleDetail(scope.row)">
                {{scope.row.customerName}}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column prop="identityType.label" label="证件类型" min-width="100" align="left"
                           :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="identityNo" label="证件号码" min-width="100" align="left"
                           :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="templateName" label="评级模版" min-width="120" align="left"
                           :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="totalScore" label="评级分数" min-width="60" align="right"></el-table-column>
          <el-table-column prop="ratingGrade" label="等级" min-width="30" align="left"></el-table-column>
          <el-table-column prop="creationDate" label="评级日期" min-width="80" align="left"></el-table-column>
          <el-table-column label="确认状态" min-width="80" align="left">
            <template slot-scope="scope">
              <ft-enum-select :editing="false" v-model="scope.row.confirmStatus" service-name="lss-customer"
                              type-name="confirmStatus"/>
            </template>
          </el-table-column>
          <el-table-column label="功能操作" min-width="80" align="center">
            <template slot-scope="scope">
              <el-popover
                placement="top"
                width="193"
                v-model="scope.row.delVisible">
                <p style="text-align: center; font-size: 12px;">数据删除后，将不能恢复，确定删除吗？</p>
                <div style="text-align: center; margin: 0">
                  <el-button size="mini" @click="scope.row.delVisible = false">取消</el-button>
                  <el-button type="danger" size="mini" @click="handleDelete(scope.row)">确定</el-button>
                </div>
                <el-button slot="reference" type="text" size="small" style="color: #B94A48"
                           :disabled="scope.row.confirmStatus=='CONFIRMED'">删除
                </el-button>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
      </ft-pagination>
    </el-card>

    <!-- 新增页面 -->
    <customer-rating-add v-if="isAdd"
                         :propsData="propsData"
                         :isFormDisabled="isFormDisabled"
                         @returnList="returnList"
                         @returnDetail="returnDetail">
    </customer-rating-add>

    <!-- 详情页面 -->
    <customer-rating-detail v-if="isCard"
                            :propsData="propsData"
                            :propActiveName="propActiveName"
                            :isFormDisabled="isFormDisabled"
                            @returnList="returnList">
    </customer-rating-detail>
  </div>
</template>

<script>
  import CustomerRatingAdd from "./CustomerRatingAdd.vue";
  import CustomerRatingDetail from "./CustomerRatingDetail.vue";
  import CustomerRatingQueryForm from "./CustomerRatingQueryForm";

  export default {
    components: {CustomerRatingQueryForm, CustomerRatingAdd, CustomerRatingDetail},
    mounted() {
      this.refreshPage()
    },
    data() {
      return {
        //分页
        currentPage: 1,
        pageSize: 8,
        totalElements: 0,
        //模糊查询
        selectType: 'ALL',
        selectValue: '',
        options: [
          {
            value: 'ALL',
            label: '全部'
          },
          {
            value: 'customerName',
            label: '客户名称'
          },
        ],
        //评级数据
        ratingData: [],
        //评级列表页面
        isList: true,
        //评级新增页面
        isAdd: false,
        //评级详情页面
        isCard: false,
        //详情编辑控制
        isFormDisabled: false,
        //详情数据
        propsData: {},
        //默认显示页签
        propActiveName: '',
        //高级查询面板
        showQueryPanel: false,
        //高级查询面板
        searchParam: {},
        //加载
        loading: false,
      }
    },
    methods: {
      //查询项change事件
      valueChanged(value) {
        this.selectType = value
      },
      ratingQueryChange(searchParam) {
        searchParam.initQuery = false
        this.searchParam = searchParam
      },
      //高级查询参数
      search(searchParam) {
        searchParam.initQuery = false
        this.searchParam = searchParam
        this.load(this.currentPage, this.pageSize)
      },
      //数据加载
      load(pageIndex, pageSize) {
        if (pageIndex != undefined) {
          this.currentPage = pageIndex
        }
        if (pageSize != undefined) {
          this.pageSize = pageSize
        }

        this.refreshPage()
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.currentPage = 1
        this.refreshPage()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.refreshPage()
      },
      //查看详情
      handleDetail(row) {
        this.propsData = row
        if (this.propsData.ratingElement[0]) {
          this.propActiveName = this.propsData.ratingElement[0].quotaCategorySubName
        }
        this.isList = false
        this.isCard = true
        this.isFormDisabled = true
      },
      //删除
      handleDelete(scope) {
        let url = "/joys-rest/lss-customer/rating"
        this.$http.delete(url + "/" + scope.customerRatingId).then(
          resp => {
            this.refreshPage()
            this.$message.success('删除成功！')
          },
          resp => {
            this.$message.error("删除失败！")
          }
        )
      },
      //返回列表
      returnList() {
        this.isList = true
        this.isAdd = false
        this.isCard = false
        this.refreshPage()
      },
      //返回详情
      returnDetail(val) {
        this.propsData = val
        this.isAdd = false
        this.isCard = true
        this.isFormDisabled = true
      },
      //刷新
      refreshPage() {
        if (!this.searchParam) {
          this.searchParam = {}
        }
        this.loading = true
        this.$http.post("/joys-rest/lss-customer/rating/page", this.searchParam, {
          params: {
            pageIndex: this.currentPage,
            pageSize: this.pageSize,
          }
        }).then(resp => {
          if (resp.ok) {
            this.ratingData = resp.body.rows
            this.totalElements = resp.body.total
          }
          this.loading = false
        }, resp => {
          this.loading = false
        })
      },
      //新增
      add() {
        this.propsData = {}
        this.isAdd = true
        this.isList = false
        this.isFormDisabled = false
      },
      packup(showQueryPanel) {
        this.showQueryPanel = showQueryPanel
      }
    }
  }
</script>
<style scoped>
  .cardclass >>> .el-card__body {
    padding: 0 !important;
  }

  .headerClass {
    text-align: left;
    height: 50px;
    background-color: #E4E8EB;
    font-size: 12px;
    padding: 0 0 0 20px;
  }

  .spanClass {
    text-align: left;
    background-color: #E4E8EB;
    padding-left: 10px;
  }

  header-cell-style {
    background: '#F4F8F9';
  }
</style>
